<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /**
      在css中我们不需要在去小心翼翼的拼合三角形了，可以使用conic-gradient来达到一种
      渐变效果，这种效果有点像俯视的圆锥体。
     */
    .app{
      width: 400px;
      height: 400px;
      background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);/*所有色标的颜色变化都是由一条射线绕着端点旋转来推进的*/

    }
    .app2{
      width: 400px;
      height: 400px;
      background-image: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);
      background-size: 80px 80px;
      background-blend-mode: lighten;
    }
    .app3{
      width: 400px;
      height: 400px;
      background-image: url("https://img2.woyaogexing.com/2018/11/08/9d20f8de63f2348a!480x480.jpg");
      background-color: #ffbb33;
      background-blend-mode: screen;
      /*当然,关于背景图片的技巧有许多
        这里我们不在赘述了
        最后我们再说一下background-blend-mode 属性 可以将图案设置为混合模式
        属性值:normal 默认,把混合模式设置为普通
        normal	默认。把混合模式设置为普通。
        multiply	把混合模式设置为 multiply（乘）。
        screen	把混合模式设置为 screen（屏幕）。
        overlay	把混合模式设置为 overlay（覆盖）。
        darken	把混合模式设置为 overlay（覆盖）。
        lighten	把混合模式设置为 lighten（变亮）。
        color-dodge	把混合模式设置为 color-dodge（颜色减淡）。
        saturation	把混合模式设置为 saturation（饱和度）。
        color	把混合模式设置为 color（颜色）。
        luminosity	把混合模式设置为 luminosity（亮度）。

      */
    }

  </style>
</head>
<body>
 <div class="app"></div>
 <div class="app2"></div>
 <div class="app3"></div>

</body>
</html>
